h3 
  // START Language list
  .pull-right
    .btn-group(dropdown='', is-open='language.listIsOpen')
      button.btn.btn-default(type='button', dropdown-toggle="")
        | {{language.selected}}
        span.caret
      ul.dropdown-menu.dropdown-menu-right.animated.fadeInUpShort(role='menu')
        li(ng-repeat='(localeId, langName) in language.available')
          a(ng-click='language.set(localeId, $event)', href='#') {{langName}}
  // END Language list    

  | Dashboard
  small {{ 'dashboard.WELCOME' | translate:{ appName: app.name } }}  !

// START widgets box
.row
  .col-lg-3.col-sm-6
    // START widget
    .panel.bg-info-light.pt.b0.widget
      .ph
        em.icon-cloud-upload.fa-lg.pull-right
        .h2.mt0 1700
        .text-uppercase Uploads
      div(sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="{{colorByName('info')}}", data-chart-range-min="0", data-fill-color="{{colorByName('info')}}", data-spot-color="{{colorByName('info')}}", data-min-spot-color="{{colorByName('info')}}", data-max-spot-color="{{colorByName('info')}}", data-highlight-spot-color="{{colorByName('info')}}", data-highlight-line-color="{{colorByName('info')}}", values="2,5,3,7,4,5", style="margin-bottom: -2px", data-resize="true")
  .col-lg-3.col-sm-6
    // START widget
    .panel.widget.bg-purple-light.pt.b0.widget
      .ph
        em.icon-globe.fa-lg.pull-right
        .h2.mt0 700
          span.text-sm.text-white GB
        .text-uppercase Quota
      div(sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="{{colorByName('purple')}}", data-chart-range-min="0", data-fill-color="{{colorByName('purple')}}", data-spot-color="{{colorByName('purple')}}", data-min-spot-color="{{colorByName('purple')}}", data-max-spot-color="{{colorByName('purple')}}", data-highlight-spot-color="{{colorByName('purple')}}", data-highlight-line-color="{{colorByName('purple')}}", values="1,4,5,4,8,7,10", style="margin-bottom: -2px", data-resize="true")
  .col-lg-3.col-md-6.col-sm-12
    // START widget
    .panel.widget.bg-info-light.pt.b0.widget
      .ph
        em.icon-bubbles.fa-lg.pull-right
        .h2.mt0 500
        .text-uppercase Reviews
      div(sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="{{colorByName('info')}}", data-chart-range-min="0", data-fill-color="{{colorByName('info')}}", data-spot-color="{{colorByName('info')}}", data-min-spot-color="{{colorByName('info')}}", data-max-spot-color="{{colorByName('info')}}", data-highlight-spot-color="{{colorByName('info')}}", data-highlight-line-color="{{colorByName('info')}}", values="4,5,3,10,7,15", style="margin-bottom: -2px", data-resize="true")
  .col-lg-3.col-md-6.col-sm-12
    // START widget
    .panel.widget.bg-purple-light.pt.b0.widget
      .ph
        em.icon-pencil.fa-lg.pull-right
        .h2.mt0 35
        .text-uppercase Annotations
      div(sparkline="", data-type="line", data-width="100%", data-height="75px", data-line-color="{{colorByName('purple')}}", data-chart-range-min="0", data-fill-color="{{colorByName('purple')}}", data-spot-color="{{colorByName('purple')}}", data-min-spot-color="{{colorByName('purple')}}", data-max-spot-color="{{colorByName('purple')}}", data-highlight-spot-color="{{colorByName('purple')}}", data-highlight-line-color="{{colorByName('purple')}}", values="1,3,4,5,7,8", style="margin-bottom: -2px", data-resize="true")

// END widgets box

// START chart
.row
  .col-lg-12
    // START widget
    #panelChart9.panel.panel-default(ng-controller="FlotChartController")
      .panel-heading
        .panel-title Website Performance
      .panel-wrapper(collapse="panelChart9")
        .panel-body
          flot(src="'server/chart/splinev3.json'", options='splineOptions', height="300px")
    // END widget
// END chart

.row
  .col-lg-6
    // START panel tab
    .panel.panel-transparent
      tabset.bg-white.p0(justified="true")
        tab
          tab-heading
            em.fa.fa-clock-o.fa-fw
            | Tasks Panel
          div
            // START list group
            .list-group.mb0
              a.list-group-item.bt0(href='#')
                span.label.label-purple.pull-right just now
                em.fa.fa-fw.fa-calendar.mr
                | Calendar updated
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 4 minutes ago
                em.fa.fa-fw.fa-comment.mr
                | Commented on a post
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 23 minutes ago
                em.fa.fa-fw.fa-truck.mr
                | Order 392 shipped
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 46 minutes ago
                em.fa.fa-fw.fa-money.mr
                | Invoice 653 has been paid
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 1 hour ago
                em.fa.fa-fw.fa-user.mr
                | A new user has been added
              a.list-group-item(href='#')
                span.label.label-purple.pull-right 2 hours ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "pick up dry cleaning"
              a.list-group-item(href='#')
                span.label.label-purple.pull-right yesterday
                em.fa.fa-fw.fa-globe.mr
                | Saved the world
              a.list-group-item(href='#')
                span.label.label-purple.pull-right two days ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "fix error on sales page"
              a.list-group-item(href='#')
                span.label.label-purple.pull-right two days ago
                em.fa.fa-fw.fa-check.mr
                | Completed task: "fix error on sales page"
            // END list group
            .panel-footer.text-right
              a.btn.btn-default.btn-sm(href='#') View All Activity 
        tab
          tab-heading
            em.fa.fa-money.fa-fw
            | Transactions Panel
          div
            // START table responsive
            .table-responsive
              table.table.table-bordered.table-hover.table-striped
                thead
                  tr
                    th Order #
                    th Order Date
                    th Order Time
                    th Amount (USD)
                tbody
                  tr
                    td 3326
                    td 10/21/2013
                    td 3:29 PM
                    td $321.33
                  tr
                    td 3325
                    td 10/21/2013
                    td 3:20 PM
                    td $234.34
                  tr
                    td 3324
                    td 10/21/2013
                    td 3:03 PM
                    td $724.17
                  tr
                    td 3323
                    td 10/21/2013
                    td 3:00 PM
                    td $23.71
                  tr
                    td 3322
                    td 10/21/2013
                    td 2:49 PM
                    td $8345.23
                  tr
                    td 3321
                    td 10/21/2013
                    td 2:23 PM
                    td $245.12
                  tr
                    td 3320
                    td 10/21/2013
                    td 2:15 PM
                    td $5663.54
                  tr
                    td 3319
                    td 10/21/2013
                    td 2:13 PM
                    td $943.45
            // END table responsive
            .panel-footer.text-right
              a.btn.btn-default.btn-sm(href='#') View All Transactions
    // END panel tab
  .col-lg-6(ng-controller="VectorMapController")
    .panel.panel-transparent
      div(vector-map="", height='450', scale=0, map-name="world_mill_en")

// START Widgets
.row
  .col-lg-3
    
    // START loader widget
    .panel.panel-default
      .panel-body
        a.text-muted.pull-right(href="#"): em.fa.fa-arrow-right
        .text-info Average Monthly Uploads
        canvas.center-block(classyloader="", data-percentage="70", data-speed="20", data-font-size="40px", data-diameter="70", data-line-color="{{colorByName('info')}}", data-remaining-line-color="rgba(200,200,200,0.4)", data-line-width="10", data-rounded-line="true")
        .text-center(sparkline="", data-bar-color="{{colorByName('info')}}", data-height="30", data-bar-width="5", data-bar-spacing="2", values="5,4,8,7,8,5,4,6,5,5,9,4,6,3,4,7,5,4,7")
      .panel-footer
        p.text-muted
          em.fa.fa-upload.fa-fw
          span This Month
          span.text-dark 1000 Gb
    // END loader widget
  .col-lg-3
    // START messages and activity
    .panel.panel-default
      .panel-heading
        .panel-title Latest activities
      // START list group
      .list-group
        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-purple
                em.fa.fa-cloud-upload.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 15m
              .media-box-heading
                a(href="#").text-purple.m0 NEW FILE
              p.m0: small
                a(href="#") Bootstrap.xls
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-info
                em.fa.fa-file-text-o.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 2h
              .media-box-heading
                a(href="#").text-info.m0 NEW DOCUMENT
              p.m0: small
                a(href="#") Bootstrap.doc
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-danger
                em.fa.fa-exclamation.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 5h
              .media-box-heading
                a(href="#").text-danger.m0 BROADCAST
              p.m0
                a(href="#") Read
        // END list group item

        // START list group item
        .list-group-item
          .media-box
            .pull-left
              span.fa-stack
                em.fa.fa-circle.fa-stack-2x.text-success
                em.fa.fa-clock-o.fa-stack-1x.fa-inverse.text-white
            .media-box-body.clearfix
              small.text-muted.pull-right.ml 15h
              .media-box-heading
                a(href="#").text-success.m0 NEW MEETING
              p.m0
                small On 
                  em 10/12/2015 09:00 am
        // END list group item
      // END list group
      // START panel footer
      .panel-footer.clearfix
        a(href='#').pull-left
          small Load more
      // END panel-footer
    // END messages and activity
  .col-lg-6
    .panel.panel-default
      .panel-heading
        .pull-right.label.label-danger 5
        .pull-right.label.label-success 12
        .panel-title Team messages
      
      // START list group
      scrollable.list-group(height="230")
        // START list group item
        a.list-group-item(href='#')
          .media-box
            .pull-left
              img.media-box-object.img-circle.thumb32(src="app/img/user/02.jpg", alt="Image")
            .media-box-body.clearfix
              small.pull-right 2h
              strong.media-box-heading.text-primary 
                span.circle.circle-success.circle-lg.text-left
                | Catherine Ellis
              p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
        // END list group item
        // START list group item
        a.list-group-item(href='#')
          .media-box
            .pull-left
              img.media-box-object.img-circle.thumb32(src="app/img/user/03.jpg", alt="Image")
            .media-box-body.clearfix
              small.pull-right 3h
              strong.media-box-heading.text-primary 
                span.circle.circle-success.circle-lg.text-left
                | Jessica Silva
              p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla facilisi.
        // END list group item
        // START list group item
        a.list-group-item(href='#')
          .media-box
            .pull-left
              img.media-box-object.img-circle.thumb32(src="app/img/user/09.jpg", alt="Image")
            .media-box-body.clearfix
              small.pull-right 4h
              strong.media-box-heading.text-primary 
                span.circle.circle-danger.circle-lg.text-left
                | Jessie Wells
              p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
        // END list group item
        // START list group item
        a.list-group-item(href='#')
          .media-box
            .pull-left
              img.media-box-object.img-circle.thumb32(src="app/img/user/12.jpg", alt="Image")
            .media-box-body.clearfix
              small.pull-right 1d
              strong.media-box-heading.text-primary 
                span.circle.circle-danger.circle-lg.text-left
                | Rosa Burke
              p.mb-sm: small Cras sit amet nibh libero, in gravida nulla. Nulla...
        // END list group item
        // START list group item
        a.list-group-item(href='#')
          .media-box
            .pull-left
              img.media-box-object.img-circle.thumb32(src="app/img/user/10.jpg", alt="Image")
            .media-box-body.clearfix
              small.pull-right 2d
              strong.media-box-heading.text-primary 
                span.circle.circle-danger.circle-lg.text-left
                | Michelle Lane
              p.mb-sm: small Mauris eleifend, libero nec cursus lacinia...
        // END list group item
      // END list group
      // START panel footer
      .panel-footer.clearfix
        .input-group
          input.form-control.input-sm(type='text', placeholder='Search message ..')
          span.input-group-btn
            button.btn.btn-default.btn-sm(type='submit')
              i.fa.fa-search
      // END panel-footer

  // END dashboard sidebar
// END Widgets
